<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50px;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 点击box的时候 方块需要 从当前位置 + 300px的位置；
        var boxEle = document.querySelector(".box");

        boxEle.onclick = function(){
            // 获取box的当前 left的位置 
            var leftNum =parseInt(  getComputedStyle(this)['left']);
            console.log(leftNum);  // 50px + 300
            var disNum = leftNum + 300;
            // 把box 的left值设置成 disNum 
            this.style.left = disNum + "px";
        }


        // var str = "5043243";
        // console.log(Number(str));
        // var num = "21312"; 
        // var str = "50px";
        // var res =  Number( str.slice(0,2));
        // console.log(res);

        // var str = "500px";
        // var res = parseInt(str);

        // console.log(res);


    </script>
</body>
</html>